<template>
    <view class="wrapper">
    	<view class="chart-box">
			<view class="top-main">
				<view class="y-axis">
					<view class="y-tick" v-for="(item, index) in yAxisList" :key="index">{{item}}</view>
				</view>
				<view class="main-box">
					<view class="scale-box">
						<view class="scale-item" v-for="(item, index) in yAxisList" :key="index"></view>
					</view>
					<view class="bar-box">
						<view class="bar-item" v-for="(item, index) in barList" :key="index">
							<view class="bar" :style="{'height': `${item.value / yAxisMaximum * 100}%`}">
								
							</view>
							<view class="bar-value">{{item.value}}</view>
						</view>
					</view>
				</view>
			</view>
    		<view class="bottom-tips">
    			<view class="zero">0</view>
				<view class="x-axis">
					<view class="x-item" v-for="(item, index) in barList" :key="index">{{item.label}}</view>
				</view>
    		</view>
    	</view>
    </view>
</template>

<script>
export default {
	data() {
		return {
			// X轴的标签（月份）
			xLabels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
			// 对应每个月的数据值（柱状图的高度）
			barData: [10, 16, 15, 33, 60, 143, 100, 16, 160, 33, 60, 23],
			barList: [{
				label: "1月",
				value: 10,
			},{
				label: "2月",
				value: 16,
			},{
				label: "3月",
				value: 15,
			},{
				label: "4月",
				value: 33,
			},{
				label: "5月",
				value: 60,
			},{
				label: "6月",
				value: 143,
			},{
				label: "7月",
				value: 160,
			},{
				label: "8月",
				value: 90,
			},{
				label: "9月",
				value: 80,
			},{
				label: "10月",
				value: 60,
			},{
				label: "11月",
				value: 80,
			},{
				label: "12月",
				value: 70,
			},]
		};
	},
	computed: {
		//y轴
		
		//y轴最大值
		yAxisMaximum() { 
			const maxValue = this.barList.reduce((max, item) => (item.value > max ? item.value : max), this.barList[0].value);
			
			let resultValue = maxValue;
			
			// 判断条件：是否能同时整除 4 和 10
			if (maxValue % 4 !== 0 || maxValue % 10 !== 0) {
			  // 如果不能整除 4 和 10，找到大于 maxValue 的第一个能整除 4 和 10 的数
			  resultValue = Math.ceil(maxValue / 20) * 20;  // 4 和 10 的最小公倍数是 20
			}
			
			return resultValue;
		},
		yAxisList() {
			// 生成从 0 到 160 的五个均等分的值
			const maxValue = this.yAxisMaximum;
			const steps = 4;  // 生成5个值, 需要4个间隔
			const stepSize = maxValue / steps;
			
			// 生成分割的值并去掉0
			let values = [];
			for (let i = 1; i <= steps; i++) {  // 从 1 开始，去掉 0
			  values.push(i * stepSize);
			}
			
			values.reverse();
			
			return values;
		},
	},
};
</script>

<style scoped lang="scss">
	.wrapper{
		width: 100%;
		.chart-box{
			box-sizing: border-box;
			width: 100%;
			padding: 20upx;
			background: #eee;
			font-size: 12px;
			color: #666;
			.bottom-tips{
				display: flex;
				.zero{
					width: 60upx;
					display: flex;
					justify-content: flex-end;
					position: relative;
					top: -10upx;
				}
				.x-axis{
					margin-left: 10upx;
					flex: 1;
					display: flex;
					.x-item{
						display: flex;
						justify-content: center;
						align-items: center;
						flex: 1;
					}
				}
			}
			.top-main{
				width: 100%;
				height: 220px;
				display: flex;
				.y-axis{
					width: 60upx;
					display: flex;
					flex-direction: column;
					.y-tick{
						flex: 1;
						display: flex;
						justify-content: flex-end;
						position: relative;
						top: -10upx;
					}
				}
				.main-box{
					flex: 1;
					margin-left: 10upx;
					position: relative;
					.scale-box{
						width: 100%;
						height: 100%;
						display: flex;
						flex-direction: column;
						border-bottom: 1px solid #ccc;
						.scale-item{
							flex: 1;
							border-top: 1px solid #ddd;
						}
					}
					.bar-box{
						position: absolute;
						top: 0;
						left: 0;
						z-index: 1;
						width: 100%;
						height: 100%;
						display: flex;
						.bar-item{
							flex: 1;
							height: 100%;
							display: flex;
							flex-direction: column-reverse;
							align-items: center;
							.bar{
								width: 26upx;
								height: 100%;
								border-radius: 10upx 10upx 0 0;
								background: #045FCE;
								position: relative;
								
							}
							.bar-value{
								flex: 1;
								height: 0;
								display: flex;
								align-items: flex-end;
							}
						}
					}
				}
			}
			
		}
	}
</style>
